<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .nav-main{
      width:100%;
      height:48px;
      background-color:#07111b;
      margin-bottom:8px;
      text-indent:200px;
    }
    .nav-main .link{
      margin-left:50px;
      line-height:48px;
      color:#fff;
    }
    .nav-main .container{
      width:1200px;
      margin:0 auto;
    }
    
    .slider{
      width:1226px;
      height:460px;
      overflow:hidden;
      position:relative;
      margin:0 auto;
    }
    .slider img{
      width:100%;
      height:100%;
    }
    .slider-indicator-wrap{
      position:absolute;
      bottom:24px;
      left:45%
    }
    .slider-indicator{
      width:8px;
      height:8px;
      background-color:#313a43;
      border-radius:50%;
      margin-right:12px;
      cursor:pointer;
      text-indent: -99999px;
      display:inline-block;
    }
    .slider-indicator.slider-indicator-active{
      background-color:#fff;
    }
    .slider-indicator-wrap{
      color:#fff;
    }
    .slider-control{
      position:absolute;
      width:40px;
      height:80px;
      background:lightcoral;
      top:45%;
    }
    .slider-control-left{
      left:0;
    }
    .slider-control-right{
      right:0;
    }
  </style>
</head>
<body>
  <div class="nav-main">
    <div class="container">
        <a href="" class="link">数码</a>
        <a href="" class="link">数码</a>
        <a href="" class="link">数码</a>
        <a href="" class="link">数码</a>
        <a href="" class="link">数码</a>
        <a href="" class="link">数码</a>
    </div>
    <div class="containner">
      <div class="category">
        <a href="" class="category-title"></a>
      </div>
    </div>

  </div>
  <div class="slider" id='focus-slider'>
    <div class="slider-container">
      <div class="slider-item">
        <a href="">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/888d7d8a2477269d39b16c3c4300cd6b.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt="">
        </a>
      </div>
      <div class="slider-item">
        <a href="">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/13a5765f4e2f79da4eaaf055d1d7b102.jpg?w=2452&h=920" alt="">
        </a>
      </div>
    </div>
    <ol class="slider-indicator-wrap">
      <li class="slider-indicator fl">1</li>
      <li class="slider-indicator fl">2</li>
    </ol>
    <a href="javascript:;" class="slider-control slider-control-left">&lt;</a>
    <a href="javascript:;" class="slider-control slider-control-right">&gt;</a>
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    (function($){
      'use strict';
      function Slider($el, options){
        this.$el = $el
        this.options = options
        this.$items = this.$el.find('.slider-item')
        this.$indicators = this.$el.find('.slider-indicator')
        this.itemNum = this.$items.length
        this.$controls = this.$el.find('.slider-control')

        this.curIndex = this.options.activeIndex
        // 初始化
        this._init()
      }
      Slider.DEFAULTS = {

      }
      Slider.prototype._init = function(){
        var self = this
        
        this.$items.eq(this.options.activeIndex)

        this.$indicators.removeClass('slider-indicator-active')
        this.$indicators.eq(this.curIndex).addClass('slider-indicator-active')

        if(this.options.animation === 'slide'){
          this.to = this._slide
          this.$el.addClass('slider-slide')
        } else {
          this.to = this._fade
          this.$el.addClass('slider-fade')
        }
        // this.$items.eq(this.curIndex).showHide('hide')
        this.$items.hide()
        // this.$items.eq(index).showHide('show')
        this.$items.eq(this.curIndex).show()
        // this.$items.showHide(this.options)
        // 绑定事件
        this.$el
          .hover(function(){
            self.$controls.show()
          }, function(){
            self.$controls.hide()
          })
          .on('click', '.slider-control-left', function(){
            self.to(self._getCorrectIndex(self.curIndex - 1))
          })
          .on('click', '.slider-control-right', function(){
            self.to(self._getCorrectIndex(self.curIndex + 1))
          })
          .on('click', '.slider-indicator', function(){
            self.to(self._getCorrectIndex(self.$indicators.index(this)))
          })

          if(this.options.interval && !isNaN(Number(this.options.interval))){
            self.$el.hover($.proxy(this._pause, this), $.proxy(this._auto, this))
            this._auto()
          }

          // 发送消息
          this.$items.on("show shown hide hidden", function(){
            self.$el.trigger('slider-'+e.type, [self.$items.index(this), this])
          })

      }
      Slider.prototype._fade = function(index){
        // this.$items.eq(this.curIndex).showHide('hide')
        this.$items.eq(this.curIndex).hide()
        // this.$items.eq(index).showHide('show')
        this.$items.eq(index).show()

        this.$indicators.eq(this.curIndex).removeClass('slider-indicator-active')
        this.$indicators.eq(index).addClass('slider-indicator-active')

        this.curIndex = index
      }
      Slider.prototype._getCorrectIndex = function(index){
        if(isNaN(Number(index))) return 0
        if(index < 0) return this.itemNum - 1
        if(index > this.itemNum - 1) return 0
        return index
      }
      Slider.prototype._slide = function(){

      }
      Slider.prototype._auto = function(){
        
        var self = this
        this.intervalId = setInterval(function(){
          self.to(self._getCorrectIndex(self.curIndex + 1))
          
        }, self.options.interval)
      }
      Slider.prototype._pause = function(){
        clearInterval(this.intervalId)
        this.intervalId = null
      }
      $.fn.extend({
        slider: function(option){
          var $this = $(this),
              slider = $this.data('slider'),
              options = $.extend({}, Slider.DEFAULTS, $this.data(), typeof option === 'object' && option);
          
          if(!slider){
            $this.data('slider', slider = new Slider($this, options)) // 保证单例
          }
          if(typeof slider[option] === 'function'){
            slider[option]();
          }
        }
      })
    })(jQuery)
  </script>
  <script>
    $('#focus-slider').slider({
      css3: true,
      js: false,
      animation:'fade', // slider
      activeIndex: 0,
      interval: 0
    })
  </script>
</body>
</html>